﻿@model PollModel
@using System.Text.Encodings.Web
<div class="text-md-center text-left poll generalMarginSupporter" id="poll-block-@(Model.Id)">
    <h3 class="h5 poll-display-text">@Model.Name</h3>
    @if (Model.AlreadyVoted)
    {
        <div class="col-12 poll-item px-0">
            <div class="d-flex justify-content-center">
                <ul class="list-group col-md-6">
                    @foreach (var item in Model.Answers)
                    {
                        <li class="list-group-item flex-column">
                            @string.Format(T("Polls.VotesResultLine").Text, item.Name, item.NumberOfVotes, item.PercentOfTotalVotes.ToString("0.0"))
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width:@string.Format(item.PercentOfTotalVotes.ToString("0"))%" aria-valuenow="@string.Format(item.PercentOfTotalVotes.ToString("0"))" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </li>
                    }
                </ul>
            </div>
        </div>
        <div class="col-12">
                <h4 class="poll-total-votes text-center">@string.Format(T("Polls.TotalVotes").Text, Model.TotalVotes)</h4>
        </div>

    }
    else
    {
        <fieldset class="rate">
            <legend class="d-none">@Model.Name</legend>
            @foreach (var item in Model.Answers)
            {
                <label for="pollanswers-@(item.Id)-@(Model.Id)" class="custom-control custom-radio">
                    <input id="pollanswers-@(item.Id)-@(Model.Id)" class="custom-control-input" type="radio" name="pollanswers-@(Model.Id)" value="@item.Id" />
                    <span class="sr-only">pollanswers</span>
                    <span class="custom-control-label"></span>
                    <span class="custom-control-description">@item.Name</span>
                </label>
                
            }
        </fieldset>
        <div class="buttons mt-1 mb-1 text-center">
            <input type="button" value="@T("Polls.Vote")" id="vote-poll-@(Model.Id)" class="btn btn-outline-secondary" />
            <span id="poll-voting-progress-@(Model.Id)" style="display: none;" class="col-12 please-wait">@T("Common.Wait...")</span>
            <div class="poll-vote-error" id="block-poll-vote-error-@(Model.Id)">
            </div>
        </div>
        
        <script asp-location="Footer">
            $(document).ready(function () {
                $('#vote-poll-@(Model.Id)').click(function () {
                var pollAnswerId = $("input:radio[name=pollanswers-@(Model.Id)]:checked").val();
                if (typeof (pollAnswerId) == 'undefined') {
                    alert('@Html.Raw(JavaScriptEncoder.Default.Encode(T("Polls.SelectAnswer").Text))');
                }
                else {
                    var voteProgress = $("#poll-voting-progress-@(Model.Id)");
                    voteProgress.show();
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: "@(Url.RouteUrl("PollVote"))",
                        data: { "pollAnswerId": pollAnswerId, "pollId": '@(Model.Id)' },
                        success: function (data) {
                            voteProgress.hide();

                            if (data.error) {
                                $("#block-poll-vote-error-@(Model.Id)").html(data.error);
                                $('#block-poll-vote-error-@(Model.Id)').fadeIn("slow").delay(2000).fadeOut("slow");
                            }

                            if (data.html) {
                                $("#poll-block-@(Model.Id)").replaceWith(data.html);
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Failed to vote.');
                            voteProgress.hide();
                        }
                    });
                }
                return false;
            });
        });
        </script>
    }
</div>
